<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>tiptap selection 命令 - itxst.com</title>
    <meta name="keywords" content="tiptap selection 命令" />
    <meta name="description" content="tiptap selection 相关的命令focus、selectAll、deleteSelection等和焦点相关的命令、选择相关的命令。" />
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <meta http-equiv="Content-Language" content="zh-CN">
    <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon" />
    <link href="/css/zt.css?ver=1.6.6" rel="stylesheet" type="text/css" media="all" />
    <script type="text/javascript" language="javascript" src="/js/jquery.js?ver=1.6.6"></script>
    <script type="text/javascript" src="/js/highlight/highlight.min.js?ver=1.6.6"></script>
    <link rel="stylesheet" type="text/css" href="/js/highlight/styles/vs2015x.css?ver=1.6.6">
    <script type="text/javascript" language="javascript" src="/js/comm.js?ver=1.6.6"></script>
    <script type="text/javascript" language="javascript" src="/js/zt.js?ver=1.6.6"></script>
    <script type="text/javascript" charset="utf-8" src="/js/layer/layer.js?ver=1.6.6"></script>
    <link rel="alternate" media="only screen and(max-width: 640px)" href="http://m.itxst.com/tiptap/selection.html" >
    <!--[if lte IE 9]>
    <script src="/js/respond/respond.js?ver=1.6.6"></script>
    <![endif]-->
</head>
<body>
    <div class="body"  >
        <div class="header">
            <div class="naver">
                <div class="logo">
                    <a href="/"><img src="/img/logov31.png" /></a>
                </div>
                <div class="naver-left">
                 <a href="/tiptap/tutorial.html">tiptap 中文文档</a>
                </div>
                <div class="naver-search">
                    <div class="naver-search-txt">
                        <input type="text" id="keyword" placeholder="Please enter the keyword" data-topic="tiptap">
                    </div>
                    <div class="naver-search-btn"><a href="javascript:void(0)" onclick="Search()">Search</a></div>
                </div>
                 <div class="naver-right"> 
                        <a href="/ag-grid/tutorial.html">AG-GRID</a> 
                        <a href="/tiptap/tutorial.html">Tiptap</a> 
                        <a href="/css-flex/tutorial.html">CSS-FLEX</a> 
                        <a href="/Bootstrap-Table/QuickStart.html">Bootstrap-Table</a> 
                </div>
            </div>
            <div class="path">
                
            </div>
        </div>
        <div class="clearfix"></div>
        <div class="pagew">
        <div class="page" >
            <div class="page-body">
                <div class="content-detail">
                    <h1>tiptap selection 命令</h1>
               
               <p class="pe">tiptap <b>selection</b> 相关的命令<b>focus</b>、<b>selectAll</b>、<b>deleteSelection</b>等和焦点相关的命令、选择相关的命令。</p><h2>blur</h2><p class="pe"><b>blur</b>将焦点从<b>tiptap</b>编辑器中移除。</p><pre class="brush:js;toolbar:false"><code class="language-javascript">// Remove the focus from the editor
editor.commands.blur()</code></pre><h2>deleteRange</h2><p class="pe"><b>deleteRange</b>删除<b>指定范围</b>内的内容，参数<b>Range</b>。</p><pre class="brush:js;toolbar:false"><code class="language-javascript">// Delete a given range.
editor.commands.deleteRange({ from: 0, to: 10 })</code></pre><h2>deleteSelection</h2><p class="pe"><b>deleteSelection</b>删除<b>选中</b>的内容。</p><pre class="brush:js;toolbar:false"><code class="language-javascript">// The deleteSelection command deletes the currently selected nodes
editor.commands.deleteSelection()</code></pre><h2>enter</h2><p class="pe"><b>enter</b>触发一个&quot;Enter&quot;（键盘回车）命令。</p><pre class="brush:js;toolbar:false"><code class="language-javascript">// The enter command triggers an enter programmatically.
editor.commands.enter()</code></pre><h2>focus</h2><p class="pe"><b>focus</b>设置编辑器焦点，你可以设置光标位置。<br/>
 &nbsp;参数：</p><ul class=" list-paddingleft-2"><li><p class="pe"><b>position&nbsp;&nbsp;</b>&#39;start&#39; | &#39;end&#39; | &#39;all&#39; | number | boolean | null (false)</p></li><li><p class="pe"><b>options&nbsp;</b> { scrollIntoView: boolean }</p></li></ul><pre class="brush:js;toolbar:false"><code class="language-javascript">// 设置编辑器获得焦点
editor.commands.focus()

// 设置光标位于编辑器开始位置
editor.commands.focus('start')

// 设置光标位于编辑器结尾位置
editor.commands.focus('end')

// 选中全部文档
editor.commands.focus('all')

// 设置光标位于第6个字符位置
editor.commands.focus(6)

// 设置光标位于结尾位置，但是滚动条不滚动到结尾（当内容高度大于编辑器高度有滚动条时）
editor.commands.focus('end',{scrollIntoView:true})</code></pre><h2>keyboardShortcut</h2><p class="pe"><b>keyboardShortcut</b>触发快捷键命令。</p><pre class="brush:js;toolbar:false"><code class="language-javascript">/*
 The keyboardShortcut command will try to trigger a ShortcutEvent with a given name.
*/
editor.commands.keyboardShortcut('undo')</code></pre><h2>scrollIntoView</h2><p class="pe"><b>scrollIntoView</b>滚动到选中位置或光标位置。</p><pre class="brush:js;toolbar:false"><code class="language-javascript">/*
 scrollIntoView scrolls the view to the current selection or cursor position.
*/
editor.commands.scrollIntoView()</code></pre><h2>selectAll</h2><p class="pe"><b>selectAll</b>选中全部文档。</p><pre class="brush:js;toolbar:false"><code class="language-javascript">//选中全部文档，然后设置获取焦点
editor.commands.selectAll();
state.editor.commands.focus();</code></pre><h2>selectNodeBackward</h2><p class="pe">如果选择为空，并且位于文本块的开头，<b>selectNodeBackward</b>将尽可能地选择当前文本块之前的节点。</p><pre class="brush:js;toolbar:false"><code class="language-javascript">/*
If the selection is empty and at the start of a textblock, 
selectNodeBackward will select the node before the current textblock if possible.
*/
editor.commands.selectNodeBackward();</code></pre><h2>selectNodeForward</h2><p class="pe">如果选择为空，在文本块的末尾，<b>selectNodeForward</b>将尽可能选择当前文本块之后的节点。</p><pre class="brush:js;toolbar:false"><code class="language-javascript">/*
 If the selection is empty and at the end of a textblock,
 selectNodeForward will select the node after the current textblock if possible.
*/
editor.commands.selectNodeBackward()</code></pre><h2>selectParentNode</h2><p class="pe"><b>selectParentNode</b>将尝试获取当前选定节点的父节点，并将所选内容移动到该节点。</p><pre class="brush:js;toolbar:false"><code class="language-javascript">/*
selectParentNode will try to get the parent node of the currently selected
 node and move the selection to that node.
*/
editor.commands.selectParentNode();
//执行selectParentNode后插入内容看看效果
editor.commands.insertContent('www.itxst.com')</code></pre><h2>setNodeSelection</h2><p class="pe"><b>setNodeSelection</b>在指定位置创建一个新的<b>选择区</b>。</p><pre class="brush:js;toolbar:false"><code class="language-javascript">/*
 setNodeSelection creates a new NodeSelection at a given position
*/
editor.commands.setNodeSelection(6);

//vue3 例子
const state = reactive({
  editor: new Editor({
    content:  `&lt;p&gt;123456&lt;/p&gt;&lt;p&gt;abcd&lt;/p&gt;`,
    extensions: [
      StarterKit  
    ],  
  }) as any,
  result:''
});

const done = () =&gt; {
  // 这里换成3或10执行一下 可以对比效果
  let res = state.editor.commands.setNodeSelection(10);
  //插入内容看看效果
  state.editor.commands.insertContent('www.itxst.com')
}</code></pre><h2>setTextSelection</h2><p class="pe"><b>setTextSelection</b>设置选中指定文本。</p><pre class="brush:js;toolbar:false"><code class="language-javascript">/*
 If you think of selection in the context of an editor,
 you’ll probably think of a text selection. 
 With setTextSelection you can control that text selection and set it to a specified range or position.
*/

// 设置光标在第10个字符位置
editor.commands.setTextSelection(10);
editor.commands.focus();

// 选中位置从1到3的字符
editor.commands.setTextSelection({ from: 1, to: 3 });
editor.commands.focus();</code></pre>
 
               <h2>
    下载教程 Demo
</h2>
<p class="pe">
   本教程<b>Demo</b>的源码点击这里下载，<a href="https://img1.itxst.com/8/c/8c32fcdc12cb8847c62e405be8a73835.zip" target="_blank" textvalue="Tiptap Demo">Tiptap Demo</a>，下载完成后运行<b>npm i</b>初始化依赖包。
</p>
                </div>
                <div class="content-r">   <a href="/tiptap/tutorial.html" target="_self">
                     <img src="https://img1.itxst.com/0/9/09355b3592a0c16799b504a9f2a70303.png" alt="tiptap 中文文档" />
                    </a>                                                <a href="//www.itxst.com/vue-draggable/tutorial.html" target="_blank">
                                <img src="//img1.itxst.com/b/f/bf9af8368dfac84cd703ef54e1e89d14.png" alt="vue.draggable" />
                            </a>
 
                </div>
            </div>
            <div class="home-menu scroll">
                <div class="tree">
      <a data-level="1" class="leve-1   doc-1   " href="/tiptap/tutorial.html" title="tiptap 中文文档">快速入门</a>
      <a data-level="1" class="leve-1    arrow-1" href="/tiptap/configuration.html" title="Guide 向导">Guide 向导</a>
      <a data-level="1" class="leve-1    arrow-2" href="/tiptap/api.html" title="tiptap api 列表">API 列表</a>
      <a data-level="2" class="leve-2   doc-1   " href="/tiptap/methods.html" title="tiptap editor 方法">tiptap 方法</a>
      <a data-level="2" class="leve-2   doc-1   " href="/tiptap/attrs.html" title="tiptap 属性">tiptap 属性</a>
      <a data-level="2" class="leve-2   doc-1   " href="/tiptap/settings.html" title="titap 配置">titap 配置</a>
      <a data-level="2" class="leve-2    arrow-2" href="/tiptap/uaqmeemr.html" title="tiptap commands 命令">commands 命令</a>
      <a data-level="3" class="leve-3   doc-1   " href="/tiptap/uaqmeemr.html" title="tiptap commands 命令介绍">commands 命令介绍</a>
      <a data-level="3" class="leve-3   doc-1   " href="/tiptap/rvvain7z.html" title="tiptap content 文档命令">content 文档命令</a>
      <a data-level="3" class="leve-3   doc-1   " href="/tiptap/3qbv63ii.html" title="tiptap nodes &amp; marks 命令大全">nodes &amp; marks 命令</a>
      <a data-level="3" class="leve-3   doc-1   " href="/tiptap/ueriebja.html" title="tiptap lists 命令">lists 命令</a>
      <a data-level="3" class="leve-3   doc-1    doc-2 " href="/tiptap/selection.html" title="tiptap selection 命令">selection 命令</a>
      <a data-level="2" class="leve-2    arrow-1" href="/tiptap/363qzvqv.html" title="nodes 节点">nodes 节点</a>
      <a data-level="2" class="leve-2    arrow-1" href="/tiptap/marks.html" title="tiptap marks 标记">marks 标记</a>
      <a data-level="2" class="leve-2    arrow-1" href="/tiptap/extensions.html" title="tiptap extensions 扩展">extensions 扩展</a>
                 </div>
                 <div  class="clearfix"></div>
            </div>
        </div>
        <div class="clearfix"></div>
           <div class="footer">
© 2023 itxst.com All rights reserved.
</div>

<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?7e15ed96eb8133218e99de8bc1f5cb61";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
</script>
       </div>
    </div> 
</body>
</html>
